<template>
    <div id="app">
        <Meta pagealias="freelanceresumeshow" />
        <Head>个人介绍</Head>
        <div class="center">
            <div class="top">
                <div class="userlogo">
                    <div class="logobg"></div>
                    <div class="boxF two">
                        <div class="boxS two">
                            <div class="boxT two"></div>
                        </div>
                    </div>
                    <div class="boxF">
                        <div class="boxS">
                            <div class="boxT" :style="'background-image: url('+info.avatar_img+');'"></div>
                        </div>
                    </div>
                </div>
                <div class="snydiv">
                    <div class="name">{{info.name}}</div>
                    <div class="sny">{{info.gender==1?'男':'女'}}&nbsp;·&nbsp;{{info.exp_str}}&nbsp;·&nbsp;{{info.education_str}}</div>
                </div>
                <div class="address">现居地：{{info.living_city}}</div>
            </div>
            <div class="goldmedaldiv">
                <div class="goldmedal">{{info.professional_title}}</div>
                <img class="goldmedalimg" src="../../assets/freelance/images/resumexq_07.png"/>
            </div>
            <div class="title">个人简介</div>
            <div class="synopsis">{{info.brief_intro}}</div>
            <div class="hr"></div>
            <div class="title" v-if="info.services&&info.services.length>0">提供服务</div>
            <div class="servicelist" v-if="info.services&&info.services.length>0">
                <div class="titlediv">
                    <div class="name">服务名称</div>
                    <div class="money">价格</div>
                </div>
                <div class="item" v-for="(item,index) in info.services" :key="index">
                    <div class="name">{{item.title}}</div>
                    <div class="money">{{item.price}}</div>
                </div>
            </div>
            <div class="title" v-if="info.skills&&info.skills.length>0">技能专长</div>
            <div class="specialtylist clearfix" v-if="info.skills&&info.skills.length>0">
                <div class="item" v-for="(item,index) in info.skills" :key="index">
                    <div class="name">{{item.custom_name?item.custom_name:item.title}}</div>
                    <div class="degree">{{item.level_str}}</div>
                </div>
            </div>
            <div class="hr" v-if="info.skills&&info.skills.length>0"></div>
            <div class="title" v-if="info.projects&&info.projects.length>0">项目经历</div>
            <div class="experiencelist" v-if="info.projects&&info.projects.length>0">
                <div class="item" v-for="(item,index) in info.projects" :key="index">
                    <div class="name">{{item.name}}</div>
                    <div class="time">{{item.startdate+'~'+item.enddate}}</div>
                    <div class="procenter">{{item.description}}</div>
                </div>
            </div>
            <div class="hr" v-if="info.projects&&info.projects.length>0"></div>
            <div class="title" v-if="info.works&&info.works.length>0">作品案例</div>
            <swiper class="casestudy" :options="swiperOption"  v-if="info.works && info.works.length>0 && $store.state.swiperLoaded">
                <swiper-slide v-for="(item, index) in info.works" :key="index">
                    <img :src="item.img_str">
                    <div class="name">{{item.title}}</div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <div class="hr" v-if="info.works&&info.works.length>0"></div>
            <div class="title" v-if="info.show">联系方式</div>
            <div class="contactdiv" v-if="info.show">
                <div class="contactphone" v-if="info.mobile">{{info.mobile}}</div>
                <div class="contactwechat" v-if="info.weixin">{{info.weixin}}</div>
            </div>
            <div class="contactbtn" @click="contactHim">联系TA</div>
            <div class="copybtn" @click="copyWechat">复制微信号</div>
        </div>
        <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="lookmoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" :success-url="'/freelance/resume/'+resumeid"></PaySubmit>
        <van-popup
          v-model="showLogin"
          position="right"
          :overlay="false"
          style="width:100%;height:100%"
        >
          <Login
            :utype="2"
            :single_login="true"
            @afterLogin="afterLogin"
            :after_login_data="after_login_data"
            :goback_custom="true"
            @gobackCustomMethod="closeLogin"
          ></Login>
        </van-popup>
    </div>
</template>
<script>
import Login from '@/components/Login'
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    Login,
    PaySubmit,
    PopupPayment
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        initialSlide: 0,
        pagination: {
          el: '.swiper-pagination',
          renderBullet: function (index, className) {
            return (
              '<span class="' +
                        className +
                        ' index-app-four-swiper-span"></span>'
            )
          },
          bulletActiveClass: 'index-app-four-swiper-bullet-active'
        },
        speed: 800
      },
      resumeid: '',
      info: {},
      lookmoney: 0,
      paymoth: 'wxpay',
      showPayment: false,
      showLogin: false,
      is_personal_login: false,
      after_login_data: {}
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
    this.lookmoney = this.$store.state.config.freelance_view_resume_fee
    this.resumeid = this.$route.params.id
    // 请求数据
    this.fetchData()
  },
  methods: {
    onLoad () {
    },
    hidecontact () {
      this.ishidecontact = 1
    },
    fetchData () {
      const params = {
        id: this.resumeid
      }
      http.get(api.show_resume, params)
        .then(res => {
          this.info = res.data
        }).catch(() => {})
    },
    contactHim () {
      if (this.info.show) {
        location.href = `tel:${this.info.mobile}`
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'contactHim'
              }
            })
            .catch(() => {})
        } else {
          this.showPayment = true
        }
      }
    },
    copyWechat () {
      if (this.info.show) {
        var oInput = document.createElement('input')
        oInput.value = this.info.weixin
        document.body.appendChild(oInput)
        oInput.select() // 选择对象
        document.execCommand('Copy') // 执行浏览器复制命令
        oInput.className = 'oInput'
        oInput.style.display = 'none'
        this.$toast('复制成功')
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'copyWechat'
              }
            })
            .catch(() => {})
        } else {
          this.showPayment = true
        }
      }
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.order_pay, {
        id: this.resumeid,
        order_type: 3,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'freelance/resume/' + this.resumeid
      })
    },
    afterLogin (data) {
      this.showLogin = false
      this.is_personal_login = true
      let method = null
      if (data.method !== undefined) {
        method = data.method
      }
      this.fetchData(method)
    },
    closeLogin () {
      this.showLogin = false
    }
  }
}
</script>
<style lang="scss">
.index-app-four-swiper-span {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #d6d6d6;
  opacity: 1;
}
.index-app-four-swiper-bullet-active {
  width: 12px;
  background-color: #20293a;
  border-radius: 6px;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.center{
    height: calc(100vh - 53px);
    overflow: auto;
    .top{
        height: 212px;
        background: url('../../assets/freelance/images/jlxqbg.png') 0 0 no-repeat;
        background-size: 100vw 212px;
        padding-top: 79px;
        display: flex;
        position: relative;
        .userlogo{
            width: 97px;
            margin-left: 29px;
            position: relative;
            transform: perspective(96px);
            .boxF, .boxS, .boxT{
                border-radius: 33px;
                position: absolute;
                width: 83px;
                height: 96px;
                overflow: hidden;
                &.two{
                    width: 89px;
                    height: 102px;
                    top:0;
                    left: 0;
                    background-color: #ffffff;
                    border-radius: 33px;
                }
            }
            .boxF, .boxS{
                visibility: hidden;
            }
            .boxF
            {
                top:3px;
                left: 3px;
                transform: rotate(120deg);
                -webkit-transform: rotate(120deg);
            }
            .boxS
            {
                transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
            }
            .boxT
            {
                transform: rotate(-60deg);
                background: no-repeat 50% center;
                background-size: 125% auto;
                -webkit-transform: rotate(-60deg);
                visibility: visible;
            }
            .logobg{
                position: absolute;
                top: 10px;
                left: 4px;
                width: 82px;
                height: 82px;
                border-radius: 50px;
                box-shadow: 1px 3px 35px rgba($color: #000000, $alpha: 0.6);
            }
        }
        .snydiv{
            margin-left: 23px;
            .name{
                margin-top: 44px;
                width: calc(100vw - 170px);
                font-size: 20px;
                color: #20293a;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 1;
                font-weight: bold;
            }
            .sny{
                margin-top: 15px;
                width: calc(100vw - 170px);
                font-size: 14px;
                color: #555555;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 1;
            }
        }
        .address{
            position: absolute;
            bottom: 0;
            left: 29px;
            font-size: 14px;
            color: #555555;
            word-break: break-all;
        }
    }
    .goldmedaldiv{
        position: relative;
        .goldmedal{
            margin: 24px 29px 0px 29px;
            border: 1px solid #ff7e00;
            background-color: #fdfbf4;
            padding: 8px 14px 8px 26px;
            font-size: 15px;
            line-height: 1.5;
            color: #ff7e00;
        }
        .goldmedalimg{
            position: absolute;
            width: 27px;
            height: 31px;
            top: -2px;
            left: 16px;
        }
    }
    .title{
        margin-left: 19px;
        margin-top: 38px;
        line-height: 1;
        font-size: 20px;
        color: #444444;
        font-weight: bold;
    }
    .synopsis{
        line-height: 1.8;
        margin: 19px 19px 0px 19px;
        font-size: 15px;
        color: #555555;
        word-break: break-all;
    }
    .hr{
        margin: 34px 18px 0px 18px;
        height: 1px;
        background-color: #ecedf2;
    }
    .servicelist{
        margin: 19px 19px 0px 19px;
        border-top: 1px solid #ebebeb;
        border-left: 1px solid #ebebeb;
        .titlediv{
            border-bottom: 1px solid #ebebeb;
            background-color: #f8f7f3;
            height: 24px;
            display: flex;
            .name{
                flex: 3;
                height: 24px;
                font-size: 12px;
                color: #333333;
                border-right: 1px solid #ebebeb;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0px 11px 0px 11px;
            }
            .money{
                flex: 1;
                height: 24px;
                text-align: center;
                font-size: 12px;
                color: #333333;
                border-right: 1px solid #ebebeb;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .item{
            border-bottom: 1px solid #ebebeb;
            display: flex;
            .name{
                flex: 3;
                font-size: 13px;
                color: #555555;
                line-height: 1.5;
                border-right: 1px solid #ebebeb;
                display: flex;
                align-items: center;
                padding: 9px 11px 9px 11px;
                word-break: break-all;
            }
            .money{
                flex: 1;
                text-align: center;
                font-size: 13px;
                color: #ff6000;
                line-height: 1;
                border-right: 1px solid #ebebeb;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .specialtylist{
        margin: 19px 19px 0px 19px;
        .item{
            float: left;
            height: 24px;
            margin-top: 6px;
            margin-right: 7px;
            display: flex;
            align-items: center;
            background-color: #fcfaf6;
            border: 1px solid #e2d5bb;
            border-bottom-right-radius: 5px;
            border-top-left-radius: 5px;
            .name{
                line-height: 1;
                font-size: 11px;
                color: #353535;
                padding: 1px 5px 1px 5px;
                border-right: 1px dashed #a48f54;
            }
            .degree{
                line-height: 1;
                font-size: 11px;
                color: #a48f54;
                padding: 8px 5px 8px 5px;
            }
        }
    }
    .experiencelist{
        margin: 0px 19px 0px 32px;
        .item{
            margin-top: 28px;
            .name{
                line-height: 1;
                font-size: 15px;
                color: #444444;
                background: url('../../assets/freelance/images/resumexq_15.png') 0 center no-repeat;
                background-size: 15px 14px;
                padding-left: 25px;
                word-break: break-all;
            }
            .time{
                margin-top: 15px;
                line-height: 1;
                font-size: 13px;
                color: #555555;
                padding-left: 25px;
            }
            .procenter{
                margin-top: 12px;
                line-height: 1.5;
                font-size: 13px;
                color: #666666;
                padding-left: 25px;
                word-break: break-all;
            }
        }
    }
    .casestudy{
        margin: 24px 50px 0px 50px;;
        padding-bottom: 15px;
        padding-bottom: 30px;
        img{
            width: 272px;
        }
        .name{
            text-align: center;
            font-size: 12px;
            color: #20293a;
            word-break: break-all;
        }
        .swiper-pagination{
            bottom: 1px;
        }
    }
    .contactdiv{
        margin: 18px 19px 0px 19px;
        display: flex;
        .contactphone{
            line-height: 1;
            font-size: 15px;
            color: #555555;
            background: url('../../assets/freelance/images/updinfo_12.png') 0 center no-repeat;
            background-size: 11px 14px;
            padding-left: 18px;
        }
        .contactwechat{
            line-height: 1;
            font-size: 15px;
            color: #555555;
            background: url('../../assets/freelance/images/updinfo_14.png') 0 center no-repeat;
            background-size: 15px 12px;
            padding-left: 22px;
            margin-left: 38px;
        }
    }
    .contactbtn{
        margin-top: 34px;
        margin-left: 21px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #000000;
        border-radius: 50px;
        background-color: #fed700;
        border: 1px solid #fed700;
        box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    }
    .copybtn{
        margin-top: 17px;
        margin-left: 21px;
        margin-bottom: 30px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #a59e78;
        border-radius: 50px;
        background-color: #ffffff;
        border: 1px solid #fed700;
        background: url('../../assets/freelance/images/weixin_07.png') calc((100vw - 42px) / 2 - 70px) center no-repeat;
        background-size: 23px 19px;
        padding-left: 36px;
    }
}
.center::-webkit-scrollbar{
    display: none;
}
</style>
